import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import Player from 'xgplayer/dist/simple_player'
import volume from 'xgplayer/dist/controls/volume'
import playbackRate from 'xgplayer/dist/controls/playbackRate'
import progress from 'xgplayer/dist/controls/progress'
import 'xgplayer-mp4'
import { Toast } from 'antd-mobile'
import ResponsiveImage from '@/components/ResponsiveImage'
import { formatTime } from '@/utils'
import css from './index.module.scss'

export default class VideoPlayer extends PureComponent {
    playerRef = React.createRef()

    static propTypes = {
        url: PropTypes.string,
        poster: PropTypes.string,
        // posterSize: PropTypes.string,
        // 观看数
        play: PropTypes.number,
        // 弹幕数
        danmaku: PropTypes.number,
        // 时长
        duration: PropTypes.number,
        // 是否允许播放
        enable: PropTypes.bool,
        // 遮罩内容
        maskContent: PropTypes.string
    }

    static defaultProps = {
        // posterSize: '@480w_270h',
        enable: true
    }

    state = {
        player: null
    }

    initPlayer = () => {
        const { url } = this.props
        const { player } = this.state
        if (!url) {
            return
        }
        if (player) {
            if (player.hasStart) {
                player.pause()
                player.src = url
            } else {
                player.start(url)
            }                    
            return  
        } 
        const inst = new Player({
            el: this.playerRef.current,
            preloadTime: 15,                
            url,
            fluid: true,
            'x5-video-player-type': 'h5',
            playsinline: true,
            controlPlugins: [
                volume,
                playbackRate,
                progress
            ],
            playbackRate: [0.5, 1, 1.25, 1.5, 2]
        })            
        this.setState({
            player: inst
        }, () => {
            this.bindEvent()
        })                   
    }

    bindEvent = () => {
        this.state.player.once('bufferedChange', () => {
            Toast.loading('视频加载中...', 0)
        })
        this.state.player.once('canplay', () => {
            Toast.hide()
        })              
    }

    destroyPlayer = () => {
        this.state?.player?.destroy()
        this.setState({
            player: null
        })
    }

    componentDidMount() {
        this.initPlayer()
    }

    componentDidUpdate(nextProps) {
        if (nextProps.url !== this.props.url) {
            this.initPlayer()
        }
    }

    componentWillUnmount() {
        this.destroyPlayer()
    }

    render() {        
        const { enable, maskContent, poster, duration } = this.props
        return (
            <div className={css['wrap']}>
                <div className={css['content']}>
                    <ResponsiveImage src={poster}>
                        { duration && <div className={css['bar']}>
                            <span>{formatTime(duration)}</span>
                        </div> }                        
                    </ResponsiveImage>
                    <div className={css['player']} ref={this.playerRef}></div>
                </div>
                { !enable && <div className={css['mask']} dangerouslySetInnerHTML={{__html: maskContent}}></div> }
            </div>
        )
    }
}
